<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数据图表</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .content {
      padding-top: 20px;
      max-width: 1000px;
      margin: 0 auto;
    }

    .chart_map {
      width: 100%;
      height: 800px;
      margin-bottom: 30px;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="chart_map" id="chart_map"></div>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="js/echarts.min.js"></script>
  <script>
    var map = echarts.init(document.getElementById('chart_map'));

    var option = {
      title: {
        text: '投诉来源分布',
        subtext: '160万条数据',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (条)'
      },
      visualMap: {
        min: 80,
        max: 1000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },

    };

    map.on('click', function (param) {
      console.log(param)
      if (!param.data.properties.id) {
        return
      }
      if (param.data.type === 0) {
        reData(param.data.properties.id)
      }
      if (param.data.type === 1) {
        getCouties(param.data.properties.id)
      }
      if (param.data.type === 2) {
        china();
      }
    });

    china();

    function china() {
      $.get('/geo/china.json', function(geoJson) {
        echarts.registerMap('china', geoJson);

        var data = geoJson.features.map(function(t) {
          return {
            name: t.properties.name,
            value: Math.round(Math.random()*1000),
            type: 0,
            properties: t.properties
          }
        });

        data.push({
          name: '南海诸岛',
          value: 0,
          properties: {}
        })

        option.series = [{
          name: '投诉量',
          type: 'map',
          mapType: 'china',
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          data: data
        }];

        map.setOption(option);
      });
    }


    function reData(id) {
      $.get('/geo/geometryProvince/'+ id +'.json', function(geoJson) {
        echarts.registerMap(id, geoJson);

        var data = geoJson.features.map(function(t) {
          return {
            name: t.properties.name,
            value: Math.round(Math.random()*1000),
            type: 1,
            properties: t.properties
          }
        });

        option.series = [{
          name: '投诉量',
          type: 'map',
          mapType: id,
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          data: data
        }];

        map.setOption(option);
      });
    }

    function getCouties(id) {
      $.get('/geo/geometryCouties/'+ id +'00.json', function(geoJson) {
        echarts.registerMap(id, geoJson);

        var data = geoJson.features.map(function(t) {
          return {
            name: t.properties.name,
            value: Math.round(Math.random()*1000),
            type: 2,
            properties: t.properties
          }
        });

        option.series = [{
          name: '投诉量',
          type: 'map',
          mapType: id,
          itemStyle: {
            normal: {
              label: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          data: data
        }];

        map.setOption(option);
      });
    }
  </script>
</body>

</html>
